<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件冒泡</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="">
			外层div
			<span>内部span元素</span>
			外层div
		</div>
		<div id="">
			
		</div>
	</body>
</html>
<script type="text/javascript">
	$(document).ready(()=>{
		$("span").click((e)=>{
			var txt = $("div:eq(1)").html()+"<p>内部span被点击</p>"
			$("div:nth-child(2)").html(txt)
			//停止冒泡
			e.stopPropagation()
		})
		$("div:eq(0)").click((event)=>{
			var txt = $("div:eq(1)").html()+"<p>外部div被点击</p>"
			$("div:nth-child(2)").html(txt)
			//停止冒泡
			event.stopPropagation()
		})
		$("body").click((event)=>{
			var txt = $("div:nth-child(2)").html()+"<p>body被点击</p>"
			$("div:nth-child(2)").html(txt)
			//停止冒泡
			event.stopPropagation()
		})
	})
</script>